<template>
  <div class="application-status">
    <div class="filter-bar">
      <input type="text" placeholder="请输入搜索关键字" v-model="searchKeyword" />
      <label for="date-picker">日期:</label>
      <input type="date" v-model="selectedDate" id="date-picker">

      <label for="time-picker">时间:</label>
      <select v-model="selectedTime" id="time-picker">
        <option value="">请选择时间</option>
        <option value="00:00-05:59">00:00-05:59</option>
        <option value="06:00-11:59">06:00-11:59</option>
        <option value="12:00-17:59">12:00-17:59</option>
        <option value="18:00-23:59">18:00-23:59</option>
      </select>
      <button @click="applyFilters">搜索</button>
    </div>
    <table>
      <thead>
        <tr>
          <th>提交时间</th>
          <th>标准名称</th>
          <th>项目名称</th>
          <th>状态</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in filteredData" :key="item.id">
          <td>{{ item.submissionTime }}</td>
          <td>{{ item.standardName }}</td>
          <td>{{ item.projectName }}</td>
          <td>{{ item.status }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        searchKeyword: '',
        selectedDate: '',
        selectedTime: '',
        applications: [
          { id: 1, submissionTime: '2023-01-01 12:22:05', standardName: '医用防护口罩', projectName: '呼吸阻力', status: '已完成' },
          { id: 2, submissionTime: '2024-01-01 13:07:25', standardName: '医用防护口罩', projectName: '过滤效率', status: '已完成' },
          { id: 3, submissionTime: '2024-07-01 10:44:56', standardName: '医用防护口罩', projectName: '总泄露率', status: '已完成' },
          // Add more data as needed
        ],
      };
    },
    computed: {
      filteredData() {
        return this.applications.filter(item => {
          return (
            item.standardName.includes(this.searchKeyword) ||
            item.projectName.includes(this.searchKeyword) ||
            (this.selectedDate && item.submissionTime.includes(this.selectedDate)) ||
            (this.selectedTime && item.submissionTime.includes(this.selectedTime))
          );
        });
      },
    },
    methods: {
      applyFilters() {
        // Logic to apply filters
      },
    },
  };
</script>

<style scoped>
  .application-status {
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 8px;
  }

  .filter-bar {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    align-items: center;
  }

    .filter-bar input,
    .filter-bar select,
    .filter-bar button {
      padding: 8px;
      border: 1px solid #ccc;
      border-radius: 4px;
    }

    .filter-bar button {
      background-color: #4CAF50;
      color: white;
      cursor: pointer;
    }

  table {
    width: 100%;
    border-collapse: collapse;
  }

  th, td {
    padding: 10px;
    text-align: center;
    border-bottom: 1px solid #ddd;
  }

  th {
    background-color: #f2f2f2;
  }
</style>
